<template>
  <div class="invoiceOrder">
    <el-card>
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item>
          <el-date-picker
            v-model="invoiceData"
            class="work_date"
            value-format="yyyy-MM-dd HH:mm:ss"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="handlerinvoiceData"
            placeholder="请选择下单时间"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-select
            v-model="formInline.orderState"
            placeholder="请选择订单状态"
            clearable
          >
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select
            v-model="formInline.payType"
            placeholder="请选择支付方式"
            @change="handlergetOrdHisList"
            clearable
          >
            <el-option
              v-for="item in payTypeList"
              :label="item.name"
              :value="item.payType"
              :key="item.payType"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handlergetOrdHisList"
            >查询</el-button
          >
        </el-form-item>
      </el-form>
      <h4 style="margin:20px 0">订单信息列表</h4>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column
          prop="add_time"
          label="下单时间"
          width="180"
          align="center"
        >
        </el-table-column>
        <el-table-column prop="orderSn" label="订单号" align="center">
        </el-table-column>
        <el-table-column prop="address" label="商品信息" width="280">
          <template slot-scope="scoped">
            <div class="product">
              <div class="product_left">
                <img
                  :src="scoped.row.goodsInfo.goodsImg"
                  style="width;60px;height:60px"
                  alt=""
                />
              </div>
              <div class="product_right">
                <div>商品名称:{{ scoped.row.goodsInfo.goodsName }}</div>
                <div>商品型号:{{ scoped.row.goodsInfo.fitModelName }}</div>
                <div>
                  使用设备:{{
                    scoped.row.goodsInfo.fitModelNamedeviceModelName
                  }}
                </div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="goodsInfo-goodsNumber"
          label="商品数量"
          align="center"
        >
          <template slot-scope="scope">
            <div>
              {{ scope.row.goodsInfo.goodsNumber }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="needPayMoney" label="订单金额" align="center">
        </el-table-column>
        <el-table-column prop="orderState" label="订单状态" align="center">
        </el-table-column>
        <el-table-column prop="payType" label="支付方式" align="center">
          <template slot-scope="scoped">
            <div>
              <el-tag v-if="scoped.row.payType == 1">支付宝</el-tag>
              <el-tag v-else type="warning">对公账户</el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="remark" label="备注"> </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scoped">
            <div>
              <el-link
                type="primary"
                :underline="false"
                @click="handlerDetialInvoice(scoped.row)"
                >详情</el-link
              >
              <el-link type="primary" :underline="false">付款</el-link>
              <el-link type="primary" :underline="false">修改地址</el-link>
              <el-link type="primary" :underline="false">取消</el-link>
              <el-link
                type="primary"
                :underline="false"
                @click="showVioce(scoped.row)"
                >发票信息</el-link
              >

              <el-link
                type="primary"
                :underline="false"
                @click="handlerDelOrder(scoped.row)"
                >删除订单</el-link
              >
              <el-link
                type="primary"
                :underline="false"
                @click="handlershowRefund(scoped.row)"
                >申请退款</el-link
              >
              <el-link
                type="primary"
                :underline="false"
                @click="handlerSure(scoped.row)"
                >确定收货</el-link
              >
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination" style="margin-bottom: 20px">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="formInline.pageSize"
          :current-page="formInline.pageNumber"
          layout="total, sizes, prev, pager, next, jumper"
          :total="count"
        ></el-pagination>
      </div>
      <!-- 申请退款弹框 -->
      <el-dialog
        title="申请退款"
        :visible.sync="RefundDialog"
        width="40%"
        :before-close="handlerRefundClose"
      >
        <el-steps :active="refundActive" align-center :space="200">
          <el-step title="申请退款"> </el-step>
          <el-step title="卖家处理退款信息"></el-step>
          <el-step title="退款完毕"></el-step>
        </el-steps>
        <el-form
          :model="refundForm"
          ref="refundRef"
          label-width="100px"
          class="refundForm"
          v-if="refundActive == 0"
        >
          <el-form-item label="退款商品:" prop="name">
            <div class="refundForm_product">
              <div>
                <img
                  src="../../assets/images/LOGO-w.png"
                  alt=""
                  style="width:94px;height:50px"
                />
              </div>
              <div>
                <ul>
                  <li>配件名称:压缩机</li>
                  <li>配件型号:zd206</li>
                  <li>通用设备:1,12,12,</li>
                </ul>
              </div>
            </div>
          </el-form-item>
          <el-form-item label="服务类型:" prop="name">
            仅退款
          </el-form-item>
          <el-form-item label="货物状态:" prop="name">
            未发货
          </el-form-item>
          <el-form-item label="退款原因:" prop="name">
            <el-select v-model="refundForm.name" placeholder="请选择退款原因">
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="退款金额:" prop="name">
            <el-input v-model="refundForm.name" style="width:300px"></el-input>
          </el-form-item>
          <el-form-item label="退款说明:" prop="name">
            <el-input
              type="textarea"
              v-model="refundForm.name"
              style="width:300px"
            ></el-input>
          </el-form-item>
          <el-form-item label="上传照片:" prop="name">
            <ele-upload-image
              action="/Upload"
              v-model="refundImg"
              :lazy="true"
              multiple
              :fileType="['png', 'jpg', 'jpeg']"
              :responseFn="handlerRefundImg"
            ></ele-upload-image>
          </el-form-item>
        </el-form>

        <span slot="footer" class="dialog-footer">
          <el-button @click="RefundDialog = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisible = false"
            >确 定</el-button
          >
        </span>
      </el-dialog>
      <!-- 发票信息 -->
      <el-dialog
        title="发票信息"
        :visible.sync="dialogvioce"
        width="90%"
        :before-close="handleClosedialogvioce"
      >
        <div class="invoice_order">
          <h3>该订单已开具{{ orderCount }}张发票</h3>
          <div class="invoice_order_list">
            <el-table :data="orderInvoice" style="width: 100%">
              <el-table-column prop="invCode" label="发票代码">
              </el-table-column>
              <el-table-column prop="invNumber" label="发票号码">
              </el-table-column>
              <el-table-column prop="invPrice" label="发票金额">
              </el-table-column>
              <el-table-column prop="invKind" label="发票类型">
                <template slot-scope="scoped">
                  <div>
                    <el-tag v-if="scoped.row.invKind == 1">普票</el-tag>
                    <el-tag v-else>专票</el-tag>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="add_time" label="开票日期">
              </el-table-column>
              <el-table-column prop="vbrk" label="开票抬头"> </el-table-column>
              <el-table-column prop="invImg" label="发票图片">
                <template slot-scope="scoped">
                  <div>
                    <img
                      :src="scoped.row.invImg"
                      style="width:40px;height:40px"
                      alt=""
                    />
                  </div>
                </template>
              </el-table-column>
            </el-table>
            <div class="pagination" style="margin-bottom: 20px">
              <el-pagination
                @size-change="handleSizeChange1"
                @current-change="handleCurrentChange1"
                :page-sizes="[10, 20, 30, 40]"
                :page-size="order_invoice.pageSize"
                :current-page="order_invoice.pageNumber"
                layout="total, sizes, prev, pager, next, jumper"
                :total="orderCount"
              ></el-pagination>
            </div>
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogvioce = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisible = false"
            >确 定</el-button
          >
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import { getOrdHisList, getMakeInvDetail } from "../../utils/api";
export default {
  data() {
    return {
      formInline: {
        pageNumber: 1,
        pageSize: 10,
        startTime: "",
        endTime: "",
        orderState: "",
        payType: ""
      },
      value1: "",
      tableData: [],
      count: 0,
      //申请退款的弹框
      RefundDialog: false,
      //申请退款的数据
      refundForm: {
        name: ""
      },
      //   被选中的数据
      refundActive: 0,
      // 上传图片的地址
      action: "https://devicedata.wadd.vip/api/v1.node/uploadImg",
      //   上传图片的数组
      refundImg: [],
      payTypeList: [
        {
          name: "支付宝",
          payType: 1
        },
        {
          name: "对公账户",
          payType: 2
        }
      ],
      invoiceData: "",
      dialogvioce: false, //发票信息
      orderInvoice: [],
      orderCount: 0,
      order_invoice: {
        pageNumber: 1,
        pageSize: 10,
        orderSn: ""
      },
      orderCount: 0
    };
  },
  created() {
    this.handlergetOrdHisList();
  },
  methods: {
    // 选择开票日期
    handlerinvoiceData(value) {
      if (
        this.invoiceData == "" ||
        this.invoiceData == null ||
        this.invoiceData == []
      ) {
        this.formInline.startTime = "";
        this.formInline.endTime = "";
        this.handlergetOrdHisList();
      } else {
        this.formInline.startTime = value[0];
        this.formInline.endTime = value[1];
        this.handlergetOrdHisList();
      }
    },
    //   获取订历史订单
    handlergetOrdHisList() {
      this.postRequest(getOrdHisList, this.formInline).then(res => {
        if (res.code == 200) {
          this.tableData = res.data.list;
          this.count = res.data.count;
        }
      });
    },
    //点击发票信息  显示弹框
    showVioce(row) {
      this.order_invoice.orderSn = row.orderSn;
      this.dialogvioce = !this.dialogvioce;
      this.handlergetMakeInvDetail();
    },
    // 获取发票信息
    handlergetMakeInvDetail() {
      this.postRequest(getMakeInvDetail, this.order_invoice).then(res => {
        if (res.code == 200) {
          this.orderInvoice = res.data.list;
          this.orderCount = res.data.count;
        }
      });
    },
    // 删除订单
    handlerDelOrder(row) {
      this.$confirm("是否删除订单, 是否继续?", "确定删除", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除订单成功!"
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除订单"
          });
        });
    },
    // 点击确认收货
    handlerSure(row) {
      this.$confirm("是否确认收货, 是否继续?", "确定收货", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "确定收货成功!"
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消收货"
          });
        });
    },
    // 点击申请退款显示弹框
    handlershowRefund(row) {
      this.RefundDialog = !this.RefundDialog;
    },
    // 点击申请退款的弹框 隐藏
    handlerRefundClose() {},
    // 点击发票信息的弹框 隐藏
    handleClosedialogvioce() {
      this.dialogvioce = false;
    },
    // 点击上传图片返回的数据
    handlerRefundImg(response) {
      this.refundImg.push(response.data.src);
      //   return response.data.src;
      const arr = [];
      this.refundImg.forEach(item => {
        if (item != undefined) {
          arr.push(item);
        }
      });
      console.log(this.refundImg);
    },
    // 点击详情
    handlerDetialInvoice(row) {
      this.$router.push({
        path: "./invoiceOrderDetial",
        query: { orderSn: row.orderSn }
      });
    },
    //商品的分页
    handleSizeChange(val) {
      this.formInline.pageSize = val;
      this.handlergetOrdHisList();
    },
    handleCurrentChange(val) {
      this.formInline.pageNumber = val;
      this.handlergetOrdHisList();
    },
    handleSizeChange1(val) {
      this.order_invoice.pageSize = val;
      this.handlergetMakeInvDetail();
    },
    handleCurrentChange1(val) {
      this.order_invoice.pageNumber = val;
      this.handlergetMakeInvDetail();
    }
  }
};
</script>

<style lang="less" scoped>
.invoiceOrder {
  .product {
    display: flex;
    flex-direction: row;
    .product_left {
      width: 60px;
      height: 60px;
      margin: 0 30px;
    }
    .product_right {
      font-size: 12px;
    }
  }
  .refundForm {
    .refundForm_product {
      display: flex;
      flex-direction: row;
    }
  }
  .invoice_order {
    .invoice_order_list {
      display: flex;
      flex-direction: column;
      line-height: 40px;
    }
  }
}
</style>
